<html>
	<head>
		<meta charset="utf-8">
		<link href="../../gitlab/assets/application.css" rel="stylesheet">
		<style>
			.define-loading {
				width: 100%;
				position: absolute;
				top: 0;
				bottom: 0;
				z-index: 9999;
				background-color: rgba(255,255,255,.6)
			}
			.define-loading-text {
				color: #333;
				padding: 8px 0 0;
			}
			.define-loading-inner{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
			.spinner {
				margin: 0 auto;
				width: 20px;
				height: 20px;
				position: relative;
			}
			.spinner-container1 > div, .spinner-container2 > div, .spinner-container3 > div {
			  width: 6px;
			  height: 6px;
			  background-color: #333;
			  border-radius: 100%;
			  position: absolute;
			  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
			  animation: bouncedelay 1.2s infinite ease-in-out;
			  -webkit-animation-fill-mode: both;
			  animation-fill-mode: both;
			}
			.spinner .spinner-container {
			  position: absolute;
			  width: 100%;
			  height: 100%;
			}
			.spinner-container2 {
			  -webkit-transform: rotateZ(45deg);
			  transform: rotateZ(45deg);
			}
			.spinner-container3 {
			  -webkit-transform: rotateZ(90deg);
			  transform: rotateZ(90deg);
			}
			.circle1 { top: 0; left: 0; }
			.circle2 { top: 0; right: 0; }
			.circle3 { right: 0; bottom: 0; }
			.circle4 { left: 0; bottom: 0; }
			.spinner-container2 .circle1 {
			  -webkit-animation-delay: -1.1s;
			  animation-delay: -1.1s;
			}
			.spinner-container3 .circle1 {
			  -webkit-animation-delay: -1.0s;
			  animation-delay: -1.0s;
			}
			.spinner-container1 .circle2 {
			  -webkit-animation-delay: -0.9s;
			  animation-delay: -0.9s;
			}
			.spinner-container2 .circle2 {
			  -webkit-animation-delay: -0.8s;
			  animation-delay: -0.8s;
			}
			.spinner-container3 .circle2 {
			  -webkit-animation-delay: -0.7s;
			  animation-delay: -0.7s;
			}
			.spinner-container1 .circle3 {
			  -webkit-animation-delay: -0.6s;
			  animation-delay: -0.6s;
			}
			.spinner-container2 .circle3 {
			  -webkit-animation-delay: -0.5s;
			  animation-delay: -0.5s;
			}
			.spinner-container3 .circle3 {
			  -webkit-animation-delay: -0.4s;
			  animation-delay: -0.4s;
			}
			.spinner-container1 .circle4 {
			  -webkit-animation-delay: -0.3s;
			  animation-delay: -0.3s;
			}
			.spinner-container2 .circle4 {
			  -webkit-animation-delay: -0.2s;
			  animation-delay: -0.2s;
			}
			.spinner-container3 .circle4 {
			  -webkit-animation-delay: -0.1s;
			  animation-delay: -0.1s;
			}
			@-webkit-keyframes bouncedelay {
			  0%, 80%, 100% { -webkit-transform: scale(0.0) }
			  40% { -webkit-transform: scale(1.0) }
			}
			@keyframes bouncedelay {
			  0%, 80%, 100% {
			    transform: scale(0.0);
			    -webkit-transform: scale(0.0);
			  } 40% {
			    transform: scale(1.0);
			    -webkit-transform: scale(1.0);
			  }
			}
		</style>
	</head>
	<body>
		<div class="box" style="height: 200px;">123</div>
		<hr>
		<div class="box2" style="height: 200px;">456</div>
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
		<script src="../vendor/define-loading.js"></script>
		<script type="text/javascript">
			$(function(){
				loading.show('.box', '加载中')
				loading.show('.box2')
				loading.show('body')
				// loading.hide('body')
				loading.show('.page-with-sidebar')
				loading.closeAll()
			})
		</script>
	</body>
</html>